<template>
  <div>
    <h1>watch监听的使用</h1>
    ref->复制, 修改响应式数据不会影响原始数据
    toRef->引用, 修改响应式数据会影响原始数据
    ref->数据发生改变, 界面就会自动更新
    toRef->数据发生改变, 界面也不会自动更新
    toRef应用场景:
    如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef
    <ul>
      <li>{{ overText }}</li>
      <li>{{ overText1 }}</li>
      <li v-for="(item,index) in list" :key="index">
        <button @click="check(index)">{{ item }}</button>
      </li>
      <li>你的选择是【{{ user }}】</li>
      <li>
        <button @click="overActive">点餐完毕</button>
      </li>
    </ul>
    <mark>{{nowTime}}</mark>
    <button @click="getNowTime">开始时间</button>
    <div>
      <p>我是test页面</p>
      <p>{{title}}</p>
      <p>{{msg}}</p>
      <i-button size="large"  @on-click="handleClick">121233</i-button>
      <i-button disabled>121233</i-button>
<!--      <div v-if="loading">Loading.....</div>-->
<!--      <img v-if="loaded" :src="result.message" />-->
    </div>
  </div>
</template>

<script lang="ts">
import {reactive, ref, watch, toRefs} from "vue";
import {nowTime, getNowTime} from '../../utils/userNowTime'
import IButton from "../i-button/i-button.vue";
// import userUrlAxios from '../../utils/userUrlAxios'
export default {
  name: "watch-syntax",
  components: {IButton},
  setup() {
    const overText = ref('哇哈哈')
    const overText1 = ref('哇哈哈1')
    const overActive = () => {
      overText.value = overText.value + '点餐完成！';
      overText1.value = 'ref'
    }
    const msg = reactive({
      list: ['小红', '小明', '小王'],
      user: '',
      check: (index: number) => {
        msg.user = msg.list[index]
      }
    })
    //监听多个值得时候，使用数组形式，reactive中的值使用函数写法,ref的可以直接写
    watch([overText, overText1, () => msg.user], (newValue, oldValue) => {
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
      document.title = newValue[0];
    })
    const title=ref('欢迎光临红浪漫洗浴中心');
    const msg1=ref('随机出现一张狗狗的图片');
    // const { loading, loaded, result} =userUrlAxios("https://dog.ceo/api/breeds/image/random")
    const handleClick=(event:Event|undefined)=>{
      console.log(event,'123')
    }
    return {
      overText,
      overText1,
      overActive,
      ...toRefs(msg),
      nowTime,
      getNowTime,
      title,
      msg1,
      handleClick
      // loading, loaded, result
    }
  }
}
</script>

<style scoped>

</style>
